<template>
<!-- 头部 -->
    <div class="header">
        <div
            style="
                font-size: 14px;
                display: flex;
                background-color: #0f0f1e;
                overflow: auto;
                justify-content: space-around;
            "
        >
            <div class="d-flex a-center j-center mr-55" style="height: 50px">
                <img
                    class="d-flex"
                    src="@/assets/logo.png"
                    style="height: 40px; cursor: pointer"
                    @click="homePage"
                />
            </div>
        </div>
<!-- 标签 -->
        <div class="conne">
            <div class="screen">
                <div class="m-auto pt-20 w-100 ml-120">
                    <ul>
                        <li
                            class="pointer flex text-orange"
                            v-for="item in ranking"
                            :key="item.id"
                            :class="{ active: rankingCur == 'ranking' + item.value }"
                            @click.stop="getvideoList(item, 'ranking')"
                        >
                            {{ item.name }}

                            <ul class="flex w-80 flex-wrap">
                                <li
                                    class="pointer pl-10 text-black"
                                    v-for="items in item.children"
                                    :key="items.label"
                                    :class="{ active: rankingCur == 'ranking' + item.value }"
                                    @click.stop="getvideoList(items.id)"
                                >
                                    {{ items.label }}
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="yingshi">
                <!-- 循环 -->

                <ul class="video">
                    <li
                        v-for="(item, index) in videoListData"
                        :key="index"
                        @click="detail(item.id)"
                    >
                        <div class="video-img">
                            <img :src="item.cover" />

                            <span class="text-black">{{ item.episodes_name }}</span>
                        </div>
                        <h2>{{ item.introduction }}</h2>
                        <h3>{{ item.name }}</h3>
                    </li>
                </ul>
                <!-- </template> -->
            </div>
        </div>
    </div>
</template>

<script>
import { homelist, topList, videoList } from '@/api/home';

export default {
    name: 'AlteOper',
    mounted() {},
    components: {},
    data() {
        return {
            rankingCur: '',
            tagCur: '',
            ranking: [],
            dataSearch: {
                ranking: '',
                tag: '',
                pay_type: '',
                page: 1,
                pageSize: 10,
            },
            videoListData: [],
            value: '',
        };
    },
    created() {
        this.navList();
        this.getvideoList();
    },

    methods: {
        // 获取标签
        async navList() {
            let { data } = await topList();
            console.log('data  ----->  ', data);
            this.ranking = data;
        },
        // 点击切换标签
        async getvideoList(item) {
            this.rankingCur = 'ranking' + item.value;
            this.dataSearch.ranking = item.value;

            let { data } = await videoList(this.dataSearch);
            if (typeof data == 'object' && data != null) {
                if (typeof data.data == 'object' && data.data != null) {
                    this.videoListData = data.data;
                    console.log(this.videoListData);
                }
            }
        },
        homePage() {
            this.$router.push({
                path: '/',
            });
        },
        
        detail(id) {
            this.$router.push({
                path: '/WebPlayer',
                query: {
                    id,
                },
            });
        },

        // altePage() {
        //   this.$router.push({
        //     path: "/AlteOper",
        //   });
        // },
    },
};
</script>

<style scoped>
.header {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.w {
    width: 80%;
    margin: auto;
}
.active {
    color: #ff9900 !important;
}

/* 筛选 */
.screen {
    display: flex;
    flex-direction: column;
    padding-left: 40px;
}
.play-menu {
    margin: 0 10px;
    font-size: 15px;
    line-height: 60px;
    color: #ffffff;
    white-space: nowrap;
}

.play-menu:hover {
    cursor: pointer;
    color: #ff5c38 !important;
}

.play-menu-active {
    color: #ff5c38;
}
.but:hover {
    cursor: pointer;
    color: #ff0e0b !important;
}
.container {
    margin: 0 200px;

    width: 80%;
}

/* 综合 */
.composite {
    display: flex;
    margin-left: 190px;
    line-height: 20px;
}

.composite span {
    font-size: 18px;
    float: left;
    color: #ff9900;
}

.composite ul {
    width: 800px;
    height: 100%;

    position: relative;
}

.composite ul li {
    float: left;
    margin-left: 20px;
    list-style: none;
    color: #fff;
}

.composite li:hover {
    color: #ff9900;
}

/* 分类 */
.type {
    display: flex;
    line-height: 40px;
    padding-left: 210px;
}
.type span {
    font-size: 18px;
    float: left;
    color: #ff9900;
    margin-left: 20px;
}

.type ul {
    width: 75%;
    height: 100%;
    position: relative;
}

.type ul li {
    float: left;
    margin-left: 20px;
    list-style: none;
    color: #fff;
}

.type li:hover {
    color: #ff9900;
}

/* 正文 */
.yingshi {
    width: 100%;
    margin: auto;
}

.video {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 200px;
    padding-top: 30px;
}

.video li {
    width: 13%;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.video-img {
    position: relative;
    width: 90%;
    height: 300px;
}

.video-img img {
    display: block;
    width: 100%;
    height: 100%;
}

.video-img span {
    position: absolute;
    right: 15px;
    bottom: 5px;
}
.conne {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
</style>
